<template>
	<view>
		<view class="scroll_header"></view>
		<scroll-view scroll-y="true" :style="{'height':scrollHeight}">
			<view class="mt-5" v-if="u_loadmore">
				<u-loadmore status="loading" icon-type="circle" />
			</view>
			<view v-else>
				<view class="bg-white" v-if="flowList.length>2">
						<view class="d-flex py-1">
							<view class="d-flex  flex-1 j-center a-center" v-for="(item,index) in flowTab" :key="index"  @click="flow(index)">
								<text class="py-2" :class="[index==flowIndex ? 'active_flow':'']">{{item.name}}</text> 
							</view>
						</view>
				</view>
				
				<view class="m-2 bg-white rounded-20">
					<view class="today_title rounded-top p-3">
						<view class="d-flex j-sb ">
							<view class="d-flex a-center">
								<view class=""><text>快递方式：{{flowList[0].shipping_name}}</text></view>
							</view>
						</view>
						<view class="">运单编号：{{order_detail.invoice_no[0]?order_detail.invoice_no[0]:"没有填写"}}</view>
					</view>
					<view class="p-3 rounded-bottom">
						<view class="d-flex">
							<image class="today_hot" :src="flowList[0].goods_items[0].img.url" mode=""></image>
							<view class="mx-2 mt-1">
								<view class="">{{flowList[0].goods_items[0].name}}</view>
								<view class="text-light-muted my-1">属性：500g</view>
								<view class=""><text class="font-31 font-weight">{{order_detail.formated_total_fee}}</text><text class="ml-4 text-muted">x{{flowList[0].goods_items[0].number}}</text></view>
							</view>
						</view>
					</view>
				</view>
				<view class="mt-2 p-3 bg-white d-flex">
					<u-time-line>
						<u-time-line-item nodeTop="2" v-for="(item,index) in flowList[0].content" :key='index'>
								<template v-slot:node>
									<view class="u-node">
										<u-icon v-if="index===0" name="checkmark-circle-fill" color="#fd7901" size="28"></u-icon>
										<view v-else class="spot"></view>
									</view>	
								</template>	
								<!-- 此处没有自定义左边的内容，会默认显示一个点 -->
								<template v-slot:content>
									<view class="w-100">
										<view class="u-order-desc">{{item.context}}</view>
										<view class="u-order-time py-2" :class="index==flowList[0].content.length-1?'':'border-bottom'">{{item.time}}</view>
									</view>
								</template>
							</u-time-line-item>
						</u-time-line>	
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				flowTab:[{id:1,name:"订单1"},{id:2,name:"订单2"}],
				flowIndex:0,
				order_id:0, // 订单ID
				flowList:"", // 物流列表
				u_loadmore:true, // 加载中
				order_detail:"", // 订单详情
				scrollHeight:0, // 屏幕高度
			}
		},
		onReady() {
			let _this=this
			uni.getSystemInfo({
				success(resu) {
					const query = uni.createSelectorQuery()
					query.select('.scroll_header').boundingClientRect()
					console.log(resu)
					query.exec(function(res) {
						_this.scrollHeight = resu.windowHeight - res[0].bottom+ 'px';
					})
				}
			})
		},
		methods: {
			flow(i){
				this.flowIndex=i
			}
		},
		onLoad(e) {
			this.order_id=e.order_id
			this.$H.post("admin/order/express",{order_id:this.order_id}).then(res=>{
				this.flowList=res.data
			})
			this.$H.post("admin/orders/detail",{id:this.order_id}).then(res=>{
				this.order_detail=res.data
				this.u_loadmore=false 
			})
		}
	}
</script>

<style>
	.active_flow{
		border-bottom: 7rpx solid #f63a31;
		color: #f63a31;
	}
	.today_title{
		background-color: #f6efef;
	}
	.today_hot{
		width: 150upx;
		height: 150upx;
	}
	.wuliu{
		color: #fdb098;
	}
	.line{
		width: 2upx;
		height: 100%;
		background-color: #e1e1e1;
	}
	.line_line{
		height: 100upx;
	}
	.spot{
		width: 10upx;
		height: 10upx;
		background-color: #999999;
		border-radius: 50%;
	}
	
	.u-time-axis::before {
		content: " ";
		position: absolute;
		left: 0;
		top: 12rpx;
		width: 1px;
		bottom: 0;
		border-left: 1px solid #ddd!important;
		transform-origin: 0 0;
		transform: scaleX(0.5);
	}
</style>
